import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'  
import { Modal, Form, Input ,Button } from 'antd';

const FormItem = Form.Item;

class EditPasswordModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
    }

    okHandler = () => {
        const { onOk } = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
            onOk(values);
            }
        });
   };

    onCancel = () => {
      this.setState({
        visible: false,
      });
    };

    checkPassword = (rule, value, callback) => {
        if(!value && $.trim(value) == ''){
            callback('请输入密码');
        }else{
            callback();
        }
    }

    checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
        if(!value && $.trim(value) == ''){
            callback('请再次输入密码');
        }
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致，请重新输入');
        } else {
            callback();
        }
    }

    render() {

        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };

        return (
            <span>
                <Modal
                    maskClosable= {this.props.maskClosable}
                    confirmLoading= {this.props.confirmLoading}
                    title={this.props.title}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
                    width={350}
                >
                <Form layout={'horizontal'} onSubmit={this.okHandler} >
                    <FormItem
                        label="原密码"
                        {...formItemLayout}
                        hasFeedback
                    >
                        {getFieldDecorator('original',{
                            initialValue:'',
                            rules: [{
                                required: true, whitespace: true, message: '请输入原密码',
                            }]
                        
                        })(
                            <Input type="text" placeholder="原密码" style={{width:'200px'}} />
                        )}
                    </FormItem>
                    <FormItem
                        label="新密码"
                        {...formItemLayout}
                        hasFeedback
                    >
                        {getFieldDecorator('password',
                        {
                            initialValue:'',
                            rules: [{
                                validator: this.checkPassword,
                            }]
                        
                        })(
                            <Input type="text" placeholder="新密码" style={{width:'200px'}} />
                        )}
                    </FormItem>
                    <FormItem
                        label="再次输入"
                        {...formItemLayout}
                        hasFeedback
                    >
                        {getFieldDecorator('reenter',{
                            initialValue:'',
                            rules: [{
                                validator: this.checkConfirm,
                            }],
                        })(
                            <Input type="text" placeholder="再次输入新密码" style={{width:'200px'}} />
                        )}
                    </FormItem>
                </Form>
                </Modal>
            </span>
        )  
    } 
}

export default Form.create()(EditPasswordModal)